<template>
	<section>
		<mt-header fixed title="邀请朋友">
			<mt-button slot="left" icon="back" @click="goBack"></mt-button>
		</mt-header>
		<div class="mt40 wrap">
            <img :src="require('@images-activity/byq1.png')" alt />
			<div class="random flex">
				<img
					class="head fl"
					:width="30"
					:height="30"
					src="//thirdqq.qlogo.cn/g?b=sdk&k=qDpsvOzzrDbJs9RVtrKeoQ&s=100&t=1556327845"
					alt
				>
                <span class="flex1"><marquee class="marquee ml10 mr10" behavior="scroll" scrollamount="4">{{text}}</marquee></span>
			</div>
		</div>
        <img :src="require('@images-activity/byq2.png')" alt @click="getTuiguangInfo" />
        <img :src="require('@images-activity/byq3.png')" alt />
        <img :src="require('@images-activity/byq4.png')" alt @click="getTuiguangInfo" />
        <img :src="require('@images-activity/byq5.png')" alt />

	</section>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
	name: 'RecommendActivity',
	data() {
		return {
            text: '',
        }
	},
	created() {
        this.getMemo()
    },
    computed: {
        ...mapState(['agentStatus']),
    },
	methods: {
        getMemo () {
            var that = this;
            setTimeout(() => {
                this.getMemo()
            }, 3000);
            this.text =  that.getPhoneNum() + ' ' + '获得了88元'
        },
		getPhoneNum() {
			var randomCode = function(len, dict) {
				for (var i = 0, rs = ''; i < len; i++) {
					rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length)
				}
				return rs
			}
			return [1, randomCode(2, '3458'), '****', randomCode(4, '0123456789')].join('')
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        },
        getTuiguangInfo() {
            console.log('agentStatus-->', this.agentStatus)
			if (this.agentStatus === 503) {
                this.$router.push({ path: '/login' })
            } else if (this.agentStatus === 200) {
                this.$router.push({ path: '/activity/tuiguang' })
            } else if (this.agentStatus === 600) {
                MessageBox.confirm('', {
                    title: '推广赚钱',
                    message: '您还不是推广员，是否要成为推广员?',
                    confirmButtonText: '申请',
                    confirmButtonClass: 'red'
                }).then(() => {
                    this.applyTuiGuang()
                })
            }
		},
		applyTuiGuang() {
			Indicator.open({
				text: '申请中...',
				spinnerType: 'fading-circle'
			})
			axios({
				methods: 'get',
				url: '/user/user/toBePromoter.do',
				params: {}
			}).then(res => {
				Indicator.close()
				res = res.data
				if (res.code === 200) {
					Toast(res.msg)
					this.$router.push({
						path: '/activity/tuiguang'
					})
				} else {
					Toast(res.msg)
				}
			})
		}
	}
}
</script>
    
<style scoped lang='scss'>
img {
	width: 100%;
    height: auto;
    display: block;
    margin-top: -1px;
}

.head {
	width: rem(26px);
	height: rem(26px);
	border-radius: rem(13px);
}
.wrap{
    position: relative;
}
.random {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.1);
	color: #fff;
	height: rem(26px);
	border-radius: rem(13px);
	line-height: rem(26px);
    font-size: rem(14px);
    overflow: hidden;
}
.marquee{
    white-space: nowrap;
}
</style>